<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NexMagic Scholar</title>
    <link rel="stylesheet" href="../css/style.css">
    <link href="../css/scholar/scholar.css" rel="stylesheet">
    <style>
        html, body {
            height: 100%;

            overflow: hidden;
        }
    </style>
</head>
<body class="body-loading">
<div id="map"></div>
<div class="loading">
    <div class="sk-spinner sk-spinner-three-bounce loading-box">
        <div class="sk-bounce1"></div>
        <div class="sk-bounce2"></div>
        <div class="sk-bounce3"></div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/echarts/echarts.min.js"></script>
<script src="../js/echarts/world.js"></script>
<script src="../js/echarts/china.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    /*全屏大小*/
    $("#map").width(document.body.offsetWidth);
    $("#map").height(document.body.offsetHeight);
    var mapChart = echarts.init(document.getElementById("map"));
    var qo = JSON.parse(getStorage("scholar_searchList_qo"));
    console.log(qo);
    gAjax.request("org/getOrgByKey", qo).then(function (result) {
        var data = [];
        result.forEach(function (item) {
            var node = {
                value: [item.longitude, item.latitude], name: item.name, id: item.id
            };
            data.push(node);
        })
        var option = {
            title: {
                text: '',
                left: 'center',
                textStyle: {
                    color: '#000'
                }
            },
            tooltip: {
                trigger: 'item',
                position: 'top',
                formatter: function (params) {
                    var name = params.name;
                    if (name.length < 60) {
                        return name;
                    }
                    var name_solved = "";
                    for (var i = 0; i < name.length; i += 60) {
                        var endIndex = (i + 60) > name.length ? name.length : (i + 60);
                        name_solved += name.slice(i, endIndex) +"<br/>";
                    }
                    return name_solved;
                },
            },
            backgroundColor: '#fff',
            visualMap: {
                show: false,
                min: 0,
                max: 10,
                /*splitNumber: 5,*/
                calculable: true,
                inRange: {
                    color: ['#50a3ba']/*, '#eac736', '#d94e5d']/*.reverse()*/
                },
                textStyle: {
                    color: '#000'
                }
            },
            geo: {
                map: 'world',
                label: {
                    emphasis: {
                        show: true
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#eee',
                        borderColor: '#a7bfe0'
                    },
                    emphasis: {
                        areaColor: '#ffdf33'
                    }
                }
            },
            series: [{
                name: 'AQI',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: data,
                symbolSize: 7,
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                }
            }]
        };
        mapChart.on('click', function (params) {
            if (params.componentType == "geo") {
                return;
            } else {
                console.log(params)
                window.open("orgScholar.html?orgId=" + params.data.id + "&fosName=" + qo.name + "&orgName=" + params.name);
            }
        });
        mapChart.setOption(option);

        $("body").removeClass("body-loading");
        $(".loading").remove();
    });
</script>
</body>
</html>